<template>
	<view>
		<view v-if="isError">error.message</view>
		<view class="skeleton" v-if="loading">
			<u-skeleton title rows="8" :loading="true" :animate="true"></u-skeleton>
		</view>
		<view>	
			<uni-list>
				<uni-list-item v-for="(item, index) in list" :key="item._id" showArrow :clickable="true" @click="handleItemClick(item)">
					<template v-slot:body>
						<text class="title">
							{{item.title}}
						</text>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
	</view>
</template>

<script>
import { errhandler } from '../../utils/tool';
const utilObj = uniCloud.importObject("utilObj",{customUI:true})
const db = uniCloud.database();
export default {
	props:{
		type: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			loading: false,
			list: [],
			hasMore: true,
			isError: false
		};
	},
	created(){
		
	},
	mounted(){
		this.initData()
	},
	methods: {
		initData(fn){
			let len = this.list.length
			this.loading = true
			console.log(this.type);
			utilObj.getList(this.type,len)
			.then(res => {
				this.list = [...this.list, ...res]
				if(res.length < 20) this.hasMore = false
			})
			.catch(err=> {
				this.isError = true	
			})
			.finally(()=>{
				this.loading = false
				fn && typeof fn == 'function' && fn()
			})
		},
		pullDownRefreshHandler() {
			this.list = []
			this.loading = true
			this.initData(()=>uni.stopPullDownRefresh())		
		},
		reachBottomHandler() {
			this.initData()
		},
		handleItemClick(item) {
			let articleid;
			articleid = item._id
			uni.navigateTo({
				url: '/pages-blog/detail/detail',
				complete: ()=> {
					setTimeout(()=>{
						uni.$emit('toDetailParams', {articleid});
					},500)
				}
			});
		},
		fabClick() {
			// 打开新增页面
			uni.navigateTo({
				url: './add',
				events: {
					// 监听新增数据成功后, 刷新当前页面数据
					refreshData: () => {
						this.$refs.udb.loadData({
							clear: true
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	.title{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.skeleton{
		padding: 30rpx;
	}
</style>
